<template>
	<view>

		<button class="mini-btn2" @click="locationOnclick">
			<view class="chock-font">上班打卡</view>
		</button>

		<view class="index-place-box">
			<!-- 当前位置 默认显示 横杠 点击腾讯地图自动定位 -->
			<view class="icon iconfont icon-location" @click="locationOnclick">
				<text class="index-container-box-text">当前位置：</text>
				<text class="index-container-box-text2"> {{ location.address }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入微信js sdk 根据自己实际项目的位置引用文件
	import qqmapsdk from "../../utils/qqmap-wx-jssdk.min.js";
	// 注册定位插件
	const chooseLocation = requirePlugin("chooseLocation");
	export default {
		data() {
			return {
				location: {
					address: ''
				}
			};
		},
		methods: {
			/**
			 * 获取经纬度信息+地址解析
			 * 点击当前位置和打卡按钮触发自动定位事件
			 * 1.调用腾讯地图
			 * 2.获取授权定位
			 *     1>允许则进入腾讯地图，进行自动定位
			 *     2>不允许，则定位失败
			 *
			 */
			locationOnclick() {
				console.log('111')
				// 新增 先创建实例
				const QQMapWX = new qqmapsdk({
					key: "JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU",
				});
				// 获取当前的地理位置、速度
				// api 文档：https://uniapp.dcloud.io/api/location/location?id=getlocation
				uni.getLocation({
					type: "gcj02",
					success: (res) => {
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						console.log("获取经纬度成功");
						console.log("当前位置的经度:", res.longitude);
						console.log("当前位置的纬度:", res.latitude);

						let key = "JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU"; //使用在腾讯位置服务申请的key;
						let referer = "KJ打卡"; //调用插件的app的名称

						// 解析经纬度信息
						const location = JSON.stringify({
							latitude: this.latitude,
							longitude: this.longitude,
						});

						// 分类名称
						const category = "生活服务,娱乐休闲";

						/**
						 *  1.保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
						 *  https://uniapp.dcloud.io/api/router?id=navigateto
						 *
						 * 2.微信小程序插件文档
						 * https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker
						 */
						wx.navigateTo({
							url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`,
						});
					},
					// 此处新增测试

					fail: () => {
						console.log("获取经纬度失败");
					},
					complete: () => {
						console.log("执行完成");
					},
					// 新增end
				});
			},
		},

		// 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
		onShow() {
			const that = this
			const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
			if (chooseLocation.getLocation()) {
				console.log("location", location);
				that.location.address = location.address;
				// 获取用户信息
				// this.weixin();
			}


			// that.location.address = location.address
		},
		onUnload() {
			// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			chooseLocation.setLocation(null);
		}
	}
</script>

<style lang="scss">
	.mini-btn2 {
		margin-top: 56%;
		width: 120px;
		height: 120px;
		background-color: #007AFF;
		border-radius: 50%;
		box-shadow: 0 0 15px #007AFF;
	}

	.chock-font {
		padding-top: 40px;
		color: #FFFFFF;
		// padding: 40px;
		font-weight: bold;
	}
</style>
